<template>
  <PageView :pageData="Page" @operateChange="operateChange"> </PageView>
</template>
<script setup>
import {
  getApplicationList,
  deleteApplication,
  editApplication,
  addApplication,
} from "@/api/application";

const operateChange = (info, row) => {
  console.log(info, row);
};

const Page = markRaw({
  addBtn: {
    label: "添加",
    type: "primary",
    icon: "icon iconfont icon-add",
    method: addApplication,
  },
  form: {
    data: [
      {
        type: "Input",
        field: "clientName",
        label: "应用名称",
        value: "",
        placeholder: "应用名称",
        allowClear: true,
      },
      {
        type: "RangePicker",
        field: "date",
        label: "日 期",
        value: null,
        valueFormat: "YYYY-MM-DD",
        arr2obj: ["startTime", "endTime"],
      },
    ],
    btns: [
      {
        label: "查询",
        key: "search",
        icon: "icon iconfont icon-sousuo1",
        type: "primary",
      },
    ],
  },
  table: {
    columns: [
      {
        title: "应用名称",
        dataIndex: "clientName",
        key: "clientName",
      },
      {
        title: "应用标识",
        dataIndex: "clientId",
        key: "clientId",
      },
      {
        title: "应用密钥",
        dataIndex: "clientSecret",
        key: "clientSecret",
      },
      {
        title: "操作",
        width: 180,
        key: "operate",
        btns: [
          {
            label: "编辑",
            class: "table_edit-btn",
            icon: "icon iconfont icon-bianji",
            key: "edit",
            argKey: "roleId",
            method: editApplication,
          },
          {
            label: "删除",
            class: "table_del-btn",
            icon: "icon iconfont icon-shanchu",
            key: "delete",
            content: "请确认是否删除？",
            method: deleteApplication,
          },
        ],
      },
    ],
    data: getApplicationList,
  },
  modal: {
    title: "应用",
    className: "spec-modal",
    data: [
      {
        type: "Input",
        field: "clientName",
        label: "应用名称：",
        value: "",
        placeholder: "应用名称",
        labelWidth: "80px",
        rules: [
          {
            required: true,
            message: "请输入应用名称",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "clientId",
        label: "应用标识：",
        value: "",
        placeholder: "应用标识",
        labelWidth: "80px",
        rules: [
          {
            required: true,
            message: "请输入应用标识",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "clientSecretStr",
        label: "应用密钥：",
        value: "",
        placeholder: "应用密钥",
        labelWidth: "80px",
        rules: [
          {
            required: true,
            message: "请输入应用密钥",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "authorizedGrantTypes",
        label: "授权模式：",
        value: "",
        placeholder: "授权模式",
        labelWidth: "80px",
      },
      {
        type: "Input",
        field: "webServerRedirectUri",
        label: "回调地址：",
        value: "",
        placeholder: "回调地址",
        labelWidth: "80px",
      },
      {
        type: "InputNumber",
        field: "accessTokenValiditySeconds",
        label: "令牌时效：",
        value: "",
        placeholder: "令牌时效",
        labelWidth: "80px",
      },
      {
        type: "InputNumber",
        field: "refreshTokenValiditySeconds",
        label: "刷新时效：",
        value: "",
        placeholder: "刷新时效",
        labelWidth: "80px",
      },
    ],
  },
});
</script>
<style scoped lang="scss"></style>
